<template>
    <view class="m-product">
        <image class="m-product-img" :src="imageUrl" mode="scaleToFill" />
        <view class="m-product-content">
            <view class="m-product-content-title">{{ title }}</view>
            <view class="m-product-content-sub-title">{{ subTitle }}</view>
            <view class="m-product-content-tags">
                <uni-tag
                    v-for="item in tags"
                    :inverted="true"
                    :text="item"
                    type="success"
                    size="small"
                    custom-style=" margin: 8rpx 4rpx;
    word-break: keep-all;"
                />
            </view>
        </view>
        <view class="m-product-content-price">{{ price }}</view>
    </view>
</template>

<script lang="ts" setup>
const props = defineProps({
    imageUrl: String,
    price: [String, Number],
    tags: Array<string>,
    title: String,
    subTitle: String
})
</script>

<style lang="scss" scoped>
@import '~@/static/css/m-product.scss';
.m-product {
    border-radius: $uni-border-radius-base;
    margin: $uni-spacing-row-sm;
    background-color: $uni-bg-color;
    margin-top: 0rpx;
    padding-top: $uni-spacing-row-sm;
}
</style>
